<?php

/**
 * Jcrop image cropping plugin for jQuery
 * Example cropping script
 * @copyright 2008-2009 Kelly Hallman
 * More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html
 */

if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
  $targ_w = $targ_h = 150;
  $jpeg_quality = 90;

  $src = './img/reg/pool.jpg';
  $img_r = imagecreatefromjpeg($src);
  $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

  imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
      $targ_w,$targ_h,$_POST['w'],$_POST['h']);

  header('Content-type: image/jpeg');
  imagejpeg($dst_r,null,$jpeg_quality);

  exit;
}

// If not a POST request, display page below:

?><!DOCTYPE html>
<html lang="en">
<head>
  <title>Live Cropping Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  <script src="./js/jquery.min.js"></script>
  <script src="./js/jquery.Jcrop.js"></script>
  <link rel="stylesheet" href="./css/main.css" type="text/css" />
  <link rel="stylesheet" href="./css/demos.css" type="text/css" />
  <link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" />

  <script type="text/javascript">

    $(function(){

      $('#cropbox').Jcrop({
        aspectRatio: 1,
        onSelect: updateCoords
      });

    });

    function updateCoords(c)
    {
      $('#x').val(c.x);
      $('#y').val(c.y);
      $('#w').val(c.w);
      $('#h').val(c.h);
    };

    function checkCoords()
    {
      if (parseInt($('#w').val())) return true;
      alert('Please select a crop region then press submit.');
      return false;
    };

  </script>
  <style type="text/css">
    #target {
      background-color: #ccc;
      width: 500px;
      height: 330px;
      font-size: 24px;
      display: block;
    }


  </style>

</head>
<body>

<div class="container">
  <div class="row">
    <div class="span12">
      <div class="jc-demo-box">

        <div class="page-header">
          <ul class="breadcrumb first">
            <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
            <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
            <li class="active">Live Demo (Requires PHP)</li>
          </ul>
          <h1>Server-based Cropping Behavior</h1>
        </div>

        <!-- This is the image we're attaching Jcrop to -->
        <img src="./img/reg/pool.jpg" id="cropbox" />

        <!-- This is the form that our event handler fills -->
        <form action="crop.php" method="post" onsubmit="return checkCoords();">
          <input type="hidden" id="x" name="x" />
          <input type="hidden" id="y" name="y" />
          <input type="hidden" id="w" name="w" />
          <input type="hidden" id="h" name="h" />
          <input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
        </form>

        <p>
          <b>An example server-side crop script.</b> Hidden form values
          are set when a selection is made. If you press the <i>Crop Image</i>
          button, the form will be submitted and a 150x150 thumbnail will be
          dumped to the browser. Try it!
        </p>


      </div>
    </div>
  </div>
</div>
</body>

</html>
